import React, { Component } from 'react';
import { Table, Space, Button, Input, PageHeader, Breadcrumb, Row, Col, Divider, Tree, message, Tooltip, Select, Form, InputNumber, Popconfirm } from 'antd';
import { AppstoreTwoTone, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { connect } from 'dva'
import styles from "./index.less"
import Modal from 'antd/lib/modal/Modal';

const { Option } = Select
@connect((global) => ({
    userInfo: global.userInfo,
}))
class ArticleClassifyForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalVisible: false,
            secondModalVisible: false,
            defaultValue: "",
            nodeData: {},//一级目录树
            defaultTitle: "",
            modaltitle: "",
            treeData: [],//分类树
            data: [],//二级目录表数据
            selectedNode: "",
            form: {
                name: "哈哈",
                mark: "213",
                type: "ff68e4e6313a4f16bba2713e1d6323c0",
                sort: 2
            },//添加二级分类
            dirTypeList: [],//目录类型
            treeCode: ""//一级分类的code
        }
    }

    componentDidMount() {
        // this.setState({ selectedNode: this.state.treeData[ 0 ].title })
        this.getTypes()
        this.getDirs()
    }
    //获取目录类型
    getTypes = (params) => {
        this.props.dispatch({
            type: "global/getByType",
            payload: {
                type: "KNOWLEDGEDIRECTORYTYPE"
            }
        }).then(res => {
            console.log(res)
            if (res) {
                this.setState({
                    dirTypeList: res.data
                })
            }
        })
    }

    //获取分类树
    getDirs = () => {
        const { dispatch } = this.props
        dispatch({
            type: "global/getDirs",
            payload: {

            }
        }).then(res => {
            // console.log(res)
            if (res) {
                res.data.forEach((item) => {
                    item.title = item.name
                    item.key = item.id
                    item.children.forEach((item) => {
                        item.title = item.name
                        item.key = item.id
                        item.selectable = false
                    })
                })
                // console.log(res)
                this.setState({
                    treeData: res.data,
                    selectedNode: res.data[0].title,
                    data: res.data[0].children,
                    treeCode: res.data[0].code
                })
            }
        })
    }
    //添加
    createSecondClassfy = () => {
        console.log("添加")
        this.setState({
            form: {
                name: "",
                mark: "",
                sort: 1
            },
            isModalVisible: true,
            modaltitle: "二级分类添加",
        })
    }

    //编辑
    editorEvent = (record) => {
        console.log(record)
        this.setState({
            isModalVisible: true,
            defaultValue: record.name,
            modaltitle: "分类编辑",
            form: {
                id: record.id,
                name: record.name,
                mark: record.mark,
                type: record.type,
                sort: record.sort
            }
        })
    }
    //二级分类编辑增加的提交
    handleOk = () => {
        const { form, treeCode } = this.state
        // console.log(form)
        this.props.dispatch({
            type: "global/saveDir",
            payload: {
                id: form.id,
                name: form.name,
                type: form.type,
                mark: form.mark,
                createTime: "",
                sort: form.sort,
                parentCode: treeCode,
            }
        }).then(res => {
            console.log(res)
            if (res) {
                this.getDirs()
                message.success("目录更新成功！")
            }
        })
        this.setState({
            isModalVisible: false,
            secondModalVisible: false
        })
    }
    //一级分类编辑
    handleOneOk = () => {
        console.log(this.state.defaultTitle)
        const { nodeData } = this.state
        this.props.dispatch({
            type: "global/saveDir",
            payload: {
                name: this.state.defaultTitle,
                id: nodeData.id,
                type: nodeData.type,
                mark: nodeData.mark,
                createTime: "",
                sort: nodeData.sort,
                parentCode: nodeData.parentCode,
            }
        }).then(res => {
            console.log(res)
            this.getDirs()
        })
        this.setState({
            isModalVisible: false,
            secondModalVisible: false
        })
    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false,
            secondModalVisible: false
        })
    }
    //删除
    handleDelete = (record) => {
        console.log(record)
        this.props.dispatch({
            type: "global/deleteDir",
            payload: {
                key: record.id
            }
        }).then(res => {
            console.log(res)
            message.success("删除成功！")
            this.getDirs()
        })
    }
    //点击树节点
    treeOnSelect = (selectedKeys, e) => {
        console.log(selectedKeys, e)
        this.setState({
            selectedNode: e.node.title,
            data: e.node.children,
            treeCode: e.node.code
        })
    }
    onRightClickEvent = ({ event, node }) => {
        console.log(node)
        this.setState({
            secondModalVisible: true,
            defaultTitle: node.name,
            nodeData: node
        })
    }

    render() {

        let { treeData, selectedNode, isModalVisible, secondModalVisible, defaultTitle, modaltitle, data, form, dirTypeList } = this.state;

        const columns = [
            {
                title: '目录名称',
                dataIndex: 'name',
                key: 'name',
                // render: (text, record, index) => `${index + 1 + (currentPage - 1) * 10}`,
                align: "center",
            },
            {
                title: '目录类型',
                dataIndex: 'typeName',
                key: 'typeName',
                align: "center",
            },
            {
                title: '目录标识',
                dataIndex: 'mark',
                key: 'mark',
                align: "center",
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                align: "center",
            },
            {
                title: '目录排序',
                dataIndex: 'sort',
                key: 'sort',
                align: "center",
            },
            {
                title: '操作',
                key: 'action',
                align: "center",
                render: (text, record, index) => (
                    <Space size="middle">
                        <Button type="primary"
                            icon={<FormOutlined />}
                            size="small" shape="round"
                            style={{ background: "#11bf94" }}
                            onClick={() => this.editorEvent(record)}>编辑</Button>
                        {/* <Button type="primary" size="small" shape="round">编辑</Button> */}

                        <Popconfirm title="是否确实删除?" onConfirm={() => this.handleDelete(record)}>
                            <Button type="primary"
                                icon={<DeleteOutlined />}
                                danger
                                size="small"
                                shape="round"
                                // onClick={() => this.handleDelete(record)}
                                >删除</Button>
                        </Popconfirm>
                    </Space>
                ),
            },
        ]
        return (
            <div>
                <div className={styles.pagetop}>
                    <span className={styles.pageheader}>
                        <Breadcrumb>
                            <Breadcrumb.Item><AppstoreTwoTone />科研软件管理</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="/article/articleClassify">分类管理</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </span>
                </div>
                <div style={{ background: "white" }}>
                    <Row>
                        <Col span={6} style={{ minHeight: "550px" }}>
                            <div>
                                <span style={{ margin: "10px 20px", float: "left" }}>
                                    <Tooltip title="右击编辑" color="cyan" placement="rightTop">
                                        <Tree
                                            defaultExpandAll
                                            onSelect={this.treeOnSelect}
                                            treeData={treeData}
                                            onRightClick={this.onRightClickEvent}
                                        />
                                    </Tooltip>
                                </span>
                            </div>
                        </Col>
                        <Divider type="vertical" style={{ minHeight: "550px" }} />
                        <Col span={17}>
                            <div>
                                <div style={{ marginTop: "10px" }}>
                                    <span className={styles.rightHeadText}>
                                        <Divider type="vertical" />
                                        {selectedNode}
                                        <Divider type="vertical" />
                                    </span>
                                    <span><Button type="primary" onClick={this.createSecondClassfy}>添加二级分类</Button></span>
                                </div>
                            </div>
                            <Divider />
                            <Table
                                columns={columns}
                                dataSource={data}
                                pagination={false}
                                bordered
                            />
                        </Col>
                    </Row>
                </div>
                {/* 二级分类弹框 */}
                {
                    isModalVisible ?
                        <Modal
                            okText="确定"
                            cancelText="取消"
                            width={500}
                            title={modaltitle}
                            visible={isModalVisible}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}>
                            <Form initialValues={form} size="middle">
                                <Form.Item label="目录名称">
                                    <Input placeholder="请输入二级分类" defaultValue={form.name} onChange={(e) => this.setState({ form: { ...form, name: e.target.value } })} />
                                </Form.Item>
                                <Form.Item label="目录类型">
                                    <Select placeholder="请选择目录类型" defaultValue={form.type} onChange={(value) => this.setState({ form: { ...form, type: value } })}>
                                        {
                                            dirTypeList.map((item, index) => {
                                                return (
                                                    <Option key={item.dicId} value={item.dicCode}>{item.dicName}</Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                                <Form.Item label="目录标识">
                                    <Input placeholder="请输入目录标识" defaultValue={form.mark} onChange={(e) => this.setState({ form: { ...form, mark: e.target.value } })} />
                                </Form.Item>
                                <Form.Item label="目录排序">
                                    <InputNumber min={1} defaultValue={1} defaultValue={form.sort} onChange={(value) => this.setState({ form: { ...form, sort: value } })} />
                                </Form.Item>
                            </Form>
                        </Modal> : null
                }
                {/* 一级分类编辑弹框 */}
                {
                    secondModalVisible ?
                        <Modal
                            okText="确定"
                            cancelText="取消"
                            title="一级分类编辑"
                            visible={secondModalVisible}
                            onOk={this.handleOneOk}
                            onCancel={this.handleCancel}>
                            <Input value={defaultTitle} onChange={(e) => this.setState({ defaultTitle: e.target.value })} />
                        </Modal> : null
                }
            </div>
        );
    }
}

export default ArticleClassifyForm;